
import { Card, CardContent } from "@/components/ui/card";
import { Users, MessageCircle, TrendingUp, Calendar } from "lucide-react";

export const StudentMetricsBar = () => {
  return (
    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
      <Card className="bg-white shadow-sm border hover:shadow-md transition-shadow">
        <CardContent className="p-6 text-center">
          <div className="flex items-center justify-center mb-2">
            <Users className="w-8 h-8 text-blue-600" />
          </div>
          <div className="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">2,847</div>
          <div className="text-sm text-gray-600">Active Students</div>
        </CardContent>
      </Card>
      
      <Card className="bg-white shadow-sm border hover:shadow-md transition-shadow">
        <CardContent className="p-6 text-center">
          <div className="flex items-center justify-center mb-2">
            <MessageCircle className="w-8 h-8 text-green-600" />
          </div>
          <div className="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">89</div>
          <div className="text-sm text-gray-600">Group Count</div>
        </CardContent>
      </Card>
      
      <Card className="bg-white shadow-sm border hover:shadow-md transition-shadow">
        <CardContent className="p-6 text-center">
          <div className="flex items-center justify-center mb-2">
            <TrendingUp className="w-8 h-8 text-purple-600" />
          </div>
          <div className="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">342</div>
          <div className="text-sm text-gray-600">Discussion Threads</div>
        </CardContent>
      </Card>
      
      <Card className="bg-white shadow-sm border hover:shadow-md transition-shadow">
        <CardContent className="p-6 text-center">
          <div className="flex items-center justify-center mb-2">
            <Calendar className="w-8 h-8 text-orange-600" />
          </div>
          <div className="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">1,245</div>
          <div className="text-sm text-gray-600">Weekly Activity Index</div>
        </CardContent>
      </Card>
    </div>
  );
};
